<template>
  <button @click="showModal = true">打开模态框</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>这个模态框是在组件的外部渲染的</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const showModal = ref(false)
</script>
<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
